<template>
    <div class="app_box">
        <div class="app_box_bg">
            <div class="pay_banner"><img src="../../assets/img/pay/banner_bazi.jpg" alt=""></div>
            <div class="info">
                <div class="info_item" v-for="(item,idx) in list" :key="idx">
                    <div class="info_title">{{item.title}}：</div>
                    <div class="info_name">{{item.name}}</div>
                </div>
            </div>
            <div class="buddha">
                <div class="buddha_right">
                    <div class="buddha_img"></div>
                    <!-- <div class="buddha_btn">立即请佛</div> -->
                </div>
                <div class="buddha_content">本命佛是在您所生之日与您结缘之佛，是您一生的守护神。众生根器不同，须以不同方式皆因，本命佛与十二生肖磁场最接近、感应最强，您的属相为<span v-text="data.shouxiang.name"></span>，您请购属<span v-text="data.shouxiang.name"></span>开光本命佛，他将保佑您一生平安，事业顺利，万事如意。</div>
            </div>
            <!-- title -->
            <!-- <div class="title">
                <div class="title_name">八字命盘</div>
            </div> -->
            <!-- 表格 -->
            <!-- <div class="table_box">
                <div class="table_item">
                    <div class="table_name">四柱</div>
                    <div class="table_main table_color">
                        <div>年柱</div>
                        <div>月柱</div>
                        <div>日柱</div>
                        <div>时柱</div>
                    </div>
                </div>
                <div class="table_item">
                    <div class="table_name">十神</div>
                    <div class="table_main">
                        <div>食神</div>
                        <div>正印</div>
                        <div>日元</div>
                        <div>偏财</div>
                    </div>
                </div>
                <div class="table_item">
                    <div class="table_name">天干<br/>地支</div>
                    <div class="table_main table_deep table_width20">
                        <div>丁卯</div>
                        <div>壬子</div>
                        <div>乙卯</div>
                        <div>己卯</div>
                    </div>
                </div>
                <div class="table_item">
                    <div class="table_name">十神</div>
                    <div class="table_main">
                        <div>比肩</div>
                        <div>偏印</div>
                        <div>比肩</div>
                        <div>比肩</div>
                    </div>
                </div>
                <div class="table_item">
                    <div class="table_name">藏干</div>
                    <div class="table_column">
                        <div class="table_main">
                            <div>乙</div>
                            <div>癸</div>
                            <div>乙</div>
                            <div>乙</div>
                        </div>
                        <div class="table_main table_width20">
                            <div>比肩</div>
                            <div>偏印</div>
                            <div>比肩</div>
                            <div>比肩</div>
                        </div>
                    </div>
                </div>
            </div> -->
            <!-- 表格内容 -->
            <!-- <div class="info" style="border:none;">
                <div class="info_item" v-for="(item,idx) in titlelist" :key="idx" :style="{width:`${item.width}%`}">
                    <div class="info_title">{{item.title}}：</div>
                    <div class="info_name">{{item.name}}</div>
                </div>
            </div> -->
            <!-- <div class="table_tips">
                <div class="table_text">此时佩戴您的生肖专属本命佛守护神有助于提升流年大运。</div>
            </div> -->
            <!-- <div class="btn_box">
                <div>专属开运宝物推荐：<span>本命佛守护神</span></div>
                <div class="btn_box_btn">点击奉请</div>
            </div> -->
            <!-- title -->
            <!-- <div class="title">
                <div class="title_name">八字论命</div>
            </div> -->
            <!-- 背景 -->
            <!-- <div class="back_box">你是冬天的兰花，外表风光，内心甘苦自知。心性仁慈，喜欢有礼貌，有魄力的人。个性比较优雅，外在的表现比内心坚强，渴望生长在温室中，喜欢安定，不喜欢冒险。</div> -->
            <!-- 常用 -->
            <!-- <div class="common_box">
                <div>啊数量的风景按时开放了阿斯达法拉盛积分发水电费理解啊数量的风景按时开放了阿斯达法拉盛积分发水电费理解啊数量的风景按时开放了阿斯达法拉盛积分发水电费理解啊数量的风景按时开放了阿斯达法拉盛积分发水电费理解啊数量的风景按时开放了阿斯达法拉盛积分发水电费理解</div>
                <div>阿法拉盛打飞机阿里发阿法拉盛打飞机阿里发阿法拉盛打飞机阿里发阿法拉盛打飞机阿里发阿法拉盛打飞机阿里发</div>
            </div> -->
            <!-- <div class="btn_box">
                <div>专属开运宝物推荐：<span>吉祥转运珠</span></div>
                <div class="btn_box_btn">点击奉请</div>
            </div> -->
            <!-- title -->
            <div class="title">
                <div class="title_name">五行分析</div>
            </div>
            <!-- 表格 -->
            <div class="table_box">
                <div class="table_item">
                    <div class="table_name">五行</div>
                    <div class="table_main table_color">
                        <div v-for="item in data.wuxing.scores" v-text="item.name"></div>
                    </div>
                </div>
                <div class="table_item">
                    <div class="table_name">分数</div>
                    <div class="table_main">
                        <div v-for="item in data.wuxing.scores" v-text="item.score"></div>
                    </div>
                </div>
                <div class="table_item">
                    <div class="table_name">解析</div>
                    <div class="table_main">
                        <div v-for="item in data.wuxing.scores" v-text="item.funct"></div>
                    </div>
                </div>
            </div>
            <!-- 表格内容 -->
            <div class="info" style="border:none;">
                <div style="padding:12px 0;line-height:2;" v-text="data.wuxing.summary"></div>
                <!-- <div class="info_item" v-for="(item,idx) in fivelist" :key="idx" :style="{width:`${item.width}%`}">
                    <div class="info_title">{{item.title}}：</div>
                    <div class="info_name">{{item.name}}</div>
                </div> -->
            </div>
            <!-- <div class="table_tips">
                <div class="table_text">此命五行啊拉萨飞机as代理费静安路附近萨法监考老师房间爱死了as拉飞机啊酸辣粉。</div>
            </div> -->
            <div class="title_line">
                <div class="title_line_text">五行个性分析</div>
            </div>
            <div class="table_tips">
                <div v-for="item in data.wuxing.short">
                    <div class="table_text">
                        <span v-text="item.title"></span>
                    </div>
                    <div class="table_text">
                        <div style="display:inline;" v-text="item.content"></div>
                    </div>
                </div>
            </div>
            <!-- <div class="btn_box">
                <div>专属开运宝物推荐：<span>招福玉观音</span></div>
                <div class="btn_box_btn">点击奉请</div>
            </div> -->
            <!-- title -->
            <div class="title">
                <div class="title_name">八字命挂分析</div>
            </div>
            <div class="table_tips">
                <div class="table_text red" v-text="data.aiqing.title"></div>
                <div class="table_text" v-text="data.aiqing.content"></div>
                <div class="table_text red" v-text="data.shiye.title"></div>
                <div class="table_text" v-text="data.shiye.content"></div>
                <div class="table_text red" v-text="data.caiming.title"></div>
                <div class="table_text" v-text="data.caiming.content"></div>
                <div class="table_text red" v-text="data.jiankang.title"></div>
                <div class="table_text" v-text="data.jiankang.content"></div>
            </div>
            <!-- <div class="padding12">
                <div class="red">撒地方辣椒水风口浪尖啊收到了飞机as拉飞机啊酸辣粉就爱上了</div>
                <div class="red">撒地方辣椒水风口浪尖啊收到了飞机as拉飞机啊酸辣粉就爱上了</div>
                <div class="red">撒地方辣椒水风口浪尖啊收到了飞机as拉飞机啊酸辣粉就爱上了</div>
            </div> -->
            <!-- 留言 -->
            <div class="footer">
                <!-- <div class="footer_bbs" @click="onBbs">给大师留言，咨询更多问题
                    <span>></span>
                </div> -->
                <di<!-- v class="footer_phone">
                    <div class="footer_phone_text">全国客服电话
                        <span>400-987-2938</span>
                    </div>
                </div> -->
                <div class="footer_item">客服QQ: {{global.qq}}</div>
                <div class="footer_text">世界顶级八字专家团队典鹿全力打造</div>
            </div>
            <!-- 固定广告 -->
            <!-- <div class="fixed_box">
                <div class="fixed_item" @click="onAdvert('advert')">
                    <div class="fixed_icon fixed_icon_1"></div>
                    <div class="fixed_name">测算历史</div>
                </div>
                <div class="fixed_item" @click="onAdvert('bbs')">
                    <div class="fixed_icon fixed_icon_2"></div>
                    <div class="fixed_name">投诉建议</div>
                </div>
            </div> -->
            <!-- 定位btn -->
            <!-- <div class="fixed_btn">
                <mt-field class="fixed_btn_input" type="number" placeholder="请填写手机号，方便大师联系您！" v-model="phone"></mt-field>
                <div class="fixed_btn_text">提交</div>
            </div> -->
            <!-- --- -->
        </div>
    </div>
</template>
<script>
    import list from './user';
    import titlelist from './titlelist';
    import fivelist from './fivelist';
    import { Toast,Indicator } from 'mint-ui'
    import axios from 'axios';
    import qs from 'qs';
    export default{
        name:'payover',
        data(){
            return{
                list:'',
                titlelist:titlelist,
                fivelist:fivelist,
                phone:'',
                id:'',
                data:{},
                global:this.$global,
            }
        },
        methods:{
            // fixed跳转
            onAdvert(router){
                this.$router.push({
                    path:`/${router}`
                })
            },
            // bbs
            onBbs(){
                this.$router.push({
                    path:'/bbs'
                })
            },
            // 获取location订单id
            getLocationId(){
                const idArr = location.hash.split('?')[1].split('&');
                const obj = {};
                idArr.forEach((item,index)=>{
                    const unit = item.split('=');
                    obj[unit[0]]=unit[1];
                });
                return obj.id;
            },
            // 请求数据
            init(){
                Indicator.open({
                  text: '加载中...',
                  spinnerType: 'fading-circle'
                });
                const {env,query}=this.$addr;
                axios.get(`${env}${query}`,{
                    params: {
                      order_bid:this.id,
                    }
                  })
                  .then(response=>{
                    Indicator.close();
                    const {code,message,data,currentTime}=response.data;
                    if(code==0){
                        // 把历史订单参数改成以付款
                        localStorage.setItem('is_order',true);
                        // 成功
                        this.data = data;
                        // 处理list，即用户信息
                        const user_data = localStorage.getItem('user_data');
                        const userData = JSON.parse(user_data);
                        const list = [{
                            title: '姓名',
                            name: userData.name,
                        }, {
                            title: '性别',
                            name: userData.sex,
                        }, {
                            title: userData.calendar,
                            name: userData.date,
                        }, {
                            title: '时辰',
                            name: userData.time,
                        }];
                        list.push({
                            title: '属相',
                            name: data.shouxiang.name,
                        })
                        list.push({
                            title: '本命佛',
                            name: data.shouxiang.desc,
                        })
                        this.list = list;
                        // console.log(JSON.stringify(data))
                    }else{
                        // 失败
                        Toast(message);
                    }
                  })
                  .catch(error=>{
                    Indicator.close();
                    console.log(error);
                  });
            }
        },
        created(){
            // 获取离线订单id
            const order_id = localStorage.getItem('order_id');
            // const time_stamp = localStorage.getItem('time_stamp');
            // const timeDiff = Date.now()-time_stamp;
            // const base = 30*60*1000;
            // const isOver = timeDiff>=base;//是否过期
            this.id = order_id;
            // if(isOver){
            //     // 过期请求缓存
            //     localStorage.removeItem("order_id");
            //     localStorage.removeItem("time_stamp");
            //     localStorage.removeItem('user_data');
            // }else{
            //     this.id = order_id;
            // }
            this.init();
        }
    }
</script>
<style scoped>
@import url('./base.css');
</style>
